<template>
    <div class="bindVerify">
        <assets-head :title="title" :back-func="isBack"/>
        <div class="content">
            <!-- 手机邮箱验证 -->
            <div v-if="type == 1 || type == 2">
                <ExInput :label="type == 2 ? $t('邮箱') : $t('手机号')"
                    :placeholderText="type == 2 ? $t('请输入您的邮箱') : $t('请输入您的手机号码')" v-model.trim="account" :area="isArea"
                    @selectArea="onSelectArea" :dialCode="dialCode" :icon="icon" />
                <p class="label mt-14 textColor">{{ $t('验证码') }}</p>
                <div class="iptbox inputBackground">
                    <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
                    <span v-if="type != 3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time">
                            ({{ time }})s</template></span>
                </div>
            </div>
            <!-- 谷歌验证 -->
            <div v-if="type == 3">
                <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
                    <div class="imgbox">
                      <canvas id="QRcodeCanvas" v-show="!imgshow" style="width: 100%;height: 100%;"></canvas>
                      <img :src="googleQrImg" alt="" v-show="imgshow" class="QRcodeImg" />
                    </div>
                    <div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
                        <img src="@/assets/image/reload.png" alt="" @click="getGoogleauth" />
                    </div>
                    <p class="tips">{{ $t('(请妥善备份密钥以防丢失)') }}</p>
                    <div class="copy textColor" @click="copy">{{ $t('复制') }}</div>
                </div>
                <div class="flex justify-between mt-48 mb-20 textColor">
                    <div>{{ $t('谷歌验证码') }}</div>
                    <div class="flex items-center">
                        <div class="colorMain" @click="value = ''">{{ $t('清除') }}</div>
                        <div class="colorMain ml-30" @click="pastCont">{{ $t('粘贴') }}</div>
                    </div>
                </div>
                <van-password-input :value="value" :gutter="16" :focused="showKeyboard" @focus="showKeyboard = true"
                    :mask="false" />
                <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
                <div class="mt-20"></div>
                <div class="mt-44 bottom tabBackground textColor">
                    <p>{{ $t('注意事项') }}</p>
                    <p>{{ $t('1.下载Google身份验证器APP') }}</p>
                    <p>{{ $t('2.扫描上图二维码输入验证码完成绑定') }}</p>
                </div>
            </div>
            <div class="btn btnMain" @click="submit">{{ $t('确认') }}</div>
        </div>
        <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
        </nationality-list>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ApiLogin from "@/API/login.js";
import Axios from "@/API/userCenter.js";
import nationalityList from '@/page/authentication/components/nationalityList.vue'
import { PasswordInput, NumberKeyboard } from 'vant';
import { HOST_URL } from "@/config";
import {mapGetters} from "vuex";
import QRCode from "qrcode";
export default {
    props: {

    },
    components: {
        nationalityList,
        assetsHead,
        ExInput,
        [PasswordInput.name]: PasswordInput,
        [NumberKeyboard.name]: NumberKeyboard,
    },
    data() {
        return {
            HOST_URL,
            title: '',
            account: '',
            isArea: false,
            type: 0,
            verifyCode: '',
            google_auth_secret: 'PSDJKL2LKLLAJNGJ',
            showKeyboard: false,
            value: '', //谷歌验证码code
            imgshow: false,
            google_auth_url: '',
            dialCode: 0, //电话号前缀
            timer: '',
            time: 0,
            icon: '',
            isSafeLogin:false,
            googleQrImg:''
        }
    },
    mounted() {
        this.init();
        clearInterval(this.timer)
    },
    computed:{
      ...mapGetters('user', ['userInfo']),
    },
    methods: {
        getQRCode() {
          let qrData = `otpauth://totp/${this.userInfo.username}?secret=${this.google_auth_secret}`

          let opts = {
            errorCorrectionLevel: "H",//容错级别
            type: "image/png",//生成的二维码类型
            quality: 0.3,//二维码质量
            margin: 4,//二维码留白边距
            width: 364,//宽
            height: 364,//高
            text: qrData,//二维码内容
            color: {
              dark: "#333333",//前景色
              light: "#fff"//背景色
            }
          };

          this.QRCodeMsg = qrData; //生成的二维码为URL地址js
          let msg = document.getElementById("QRcodeCanvas");    // 将获取到的数据（val）画到msg（canvas）上
          QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
            console.log(error)
          });    // 将canvas转成图片格式，可以长按保存
          this.googleQrImg = msg.toDataURL('image/png');
          this.imgshow = true;
        },
        //图片地址读取当前域名
        replaceUrl(val) {
            const oldUrl = val.replace(/^https:\/\/[^/]+/, "")
            const nowUrl = this.HOST_URL
            return nowUrl + oldUrl
        },
        isBack(){
          if(this.isSafeLogin){
            this.$store.commit('user/SET_OUT')
            this.$router.replace('/login')
          }else{
            this.$router.go(-1)
          }
        },
        init() {
            let type = this.$route.query.type || this.$route.params.type;
            this.type = type;
          // console.log('111',this.$route.params.isSafeLogin)
            this.isSafeLogin = this.$route.params.isSafeLogin
            if (type == 1) {
                this.title = this.$t("手机号绑定");
                this.isArea = true
            } else if (type == 2) {
                this.title = this.$t("邮箱认证");
            } else if (type == 3) {
                this.title = this.$t("Google验证器");
                this.getGoogleauth()
            }
        },
        senCode() {
            let match = this.account.search(/@/);
            if (this.type == 2 && this.account == '') {
                this.$toast(this.$t('请输入邮箱'));
                return
            }
            if (this.type == 2 && match == -1) {
              this.$toast(this.$t('请输入正确的邮箱地址'));
              return
            }
            if (this.type == 1 && this.account == '') {
                this.$toast(this.$t('请输入手机号'));
                return
            }
            if (this.time > 0) {
                return false
            }
            ApiLogin.sendVerifyCode({
                target: this.type == 1 ? `${this.dialCode}${this.account}` : this.account,
            }).then((res) => {
                this.$toast(this.$t('发送成功'));
                this.time = 30;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.time = 0;
                        clearInterval(this.timer)
                    }
                }, 1000);
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        submit() {
            if (this.type == 2 && this.account == '') {
                this.$toast(this.$t('请输入邮箱'));
                return
            }
            if (this.type == 1 && this.account == '') {
                this.$toast(this.$t('请输入手机号'));
                return
            }
            if (this.type == 1) {
                this.bindPhone()
            } else if (this.type == 2) {
                this.bindEmail()
            } else if (this.type == 3) {
                this.bindGoogleauth()
            }
        },
        bindEmail() {
            Axios.bindEmail({
                email: this.account,
                verifcode: this.verifyCode
            }).then((res) => {
                this.$toast(this.$t('绑定成功'));
                this.$router.push('/safety')
            }).catch((error) => {
                if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
                else if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
            });
        },
        bindPhone() {
            Axios.bindPhone({
                phone: `${this.dialCode}${this.account}`,
                verifcode: this.verifyCode
            }).then((res) => {
                this.$toast(this.$t('绑定成功'));
                this.$router.push('/safety')
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        getGoogleauth() {

            Axios.getGoogleauth({
            }).then((res) => {
                this.google_auth_secret = res.data.google_auth_secret;
                this.google_auth_url = res.data.google_auth_url
                this.getQRCode()
                // console.log(res)
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        bindGoogleauth() {
            if (this.value.length < 6) {
                this.$toast(this.$t('请输入验证码'));
                return false
            }
            Axios.bindGoogleauth({
                secret: this.google_auth_secret,
                code: this.value
            }).then((res) => {
                let google_auth_bind = res.data.google_auth_bind;
                if (google_auth_bind) {
                    this.$store.commit('user/SET_USERINFO', { googleverif: true })
                    this.$toast(this.$t('绑定成功'));
                    if(this.isSafeLogin){
                      this.$store.commit('user/SET_OUT')
                      this.$router.replace('/login')
                    }else{
                      this.$router.push('/safety')
                    }
                } else {
                    this.$toast(this.$t('绑定失败'));
                }
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        copy() {
            this.$copyText(this.google_auth_secret).then(message => {
                this.$toast(this.$t('复制成功'));
            }).catch(err => {

            })
        },
        async pastCont() {
            this.value = await navigator.clipboard.readText();
        },
        getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
            console.log(params[2])
        },
        onSelectArea() {
            this.openBtn();
        },
        //打开国家列表底部弹窗
        openBtn() {
            this.$refs.controlChild.open();
        },
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    watch: {
        value(value) {
            if (value.length === 6) {
                this.showKeyboard = false
            } else {

            }
        },
    },
}
</script>

<style lang="scss" scoped>
.bindVerify {
    width: 100%;
    box-sizing: border-box;
}

.content {
    font-size: 24px;
    padding: 0 32px;
}

.iptbox {
    height: 88px;
    margin-top: 16px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;

    input {
        flex: 1;
        height: 100%;
        border: none;
    }

    span {
        color: #1D91FF;
    }
}

.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
}

.imgbox {
    @include themify() {
        border: 1px solid themed("line_color");
    }

    padding: 30px;
    width: 364px;
    height: 364px;
    box-sizing: border-box;

    img {
        width: 100%;
        height: 100%;
    }
}

.code {
    font-size: 30px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 44px;
    height: 36px;

    img {
        width: 26px;
        height: 26px;
        margin-left: 10px;
    }
}

.tips {
    margin-top: 20px;
    color: #999999;
}

.copy {
    border-radius: 8px;
    width: 264px;
    height: 80px;
    margin-top: 32px;

    @include themify() {
        border: 2px solid themed("line_color");
    }

    line-height: 80px;
}

.bottom {
    padding: 40px 32px 14px 32px;

    p {
        padding-bottom: 26px;
    }
}

.van-password-input {
    margin: 0;
}


.van-password-input__security li {
    @include themify() {
        background: themed("tab_background");
    }

    width: 100px;
    height: 100px;

    @include themify() {
        color: themed("text_color");
    }
}
</style>
